<template>
	<view class="baseForm">
		<u-button type="primary" text="缺料要货" style="width: 80px; float: right ;margin-right: 15px; height: 30px;"
			@click="jumpTo('/pages/produce/shortMaterials/materialRequest')"></u-button>
		<!-- 待完成信息 -->
		<view class="activeHeight">
			<!-- 列表 -->
			<u-list @scrolltolower="scrolltolower" class="list" v-if="total" :height="listHeight"
				lowerThreshold="100px">
				<u-list-item v-for="(item, index) in materialRequestList" :key="item.id">
					<view class="card">
						<view class="right">
							<view style="font-weight: 600;">物料：{{ item?.materialCode || '' }}</view>
							<view class="des">工作中心：{{ loginWorkInfo.workCenterName }}</view>

							<view class="title">
								<view class="des">交货日期：{{ item?.arriveTime?.split(' ')[0] || '待定' }}</view>
							</view>
						</view>
						<view class="left">
							<view class="title">
								<button v-show="item.isArrive==1" class="uni-btn" size="mini" type="primary">已送</button>
								<button v-show="!item?.isArrive" class="uni-btn" size="mini" plain type="primary"
									@click="selectWorkOrder(item, index)">未送</button>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<!-- 空数据 -->
			<view v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, toRaw, reactive } from 'vue';
	import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
	import { http } from '@/utils/http';
	import { PageResult, TabInfo } from '@/types/type';
	import { useUserStore } from '@/stores/useUserStore';
	// 登录工作组信息
	const loginWorkInfo = computed(() => JSON.parse(useUserStore().loginWorkInfo));

	const activeTab = ref(0);
	const tabList = [{ name: '待完成' }, { name: '已完成' }];
	function changeTab(val : TabInfo) {
		activeTab.value = val.index;
		if (val.index === 0 && !tableList.value.length) {
			// loadmore();
		} else if (val.index === 1 && !finishTableList.value.length) {
			// finishLoadmore();
		}
	}
	onPullDownRefresh(() => {
		current.value = 0;		//分页第一页
		materialRequestList.value = [];	//数据清空
		getMaterialRequestList('refresh');	//数据请求
	})
	//缺货要货集合
	const materialRequestList = ref([])
	async function getMaterialRequestList(type ?: string) {
		try {
			finishCurrent.value += 1;
			const result : PageResult<any> = await http({
				method: 'POST',
				url: '/mes/mesmaterialrequest/queryByPage',
				data: {
					current: finishCurrent.value,
					size: 20,
					data: {
						workCenterId: loginWorkInfo.value.workCenterId,
					}
				}
			});
			materialRequestList.value = result.data;
			// for (let i = 0; i < list.length; i++) {
			// 	materialRequestList.value.push(list[i]);
			// }
			finishTotalPage.value = result.page;
			total.value = result.total;
			type === 'refresh' && uni.stopPullDownRefresh();
		} catch (e) {
			console.log(e);
		}
	}
	// 待完成数据
	const tableList = ref([]);
	const current = ref(0);
	const totalPage = ref(0);
	const total = ref(0);

	// 已完成数据
	const finishTableList = ref([]);
	const finishCurrent = ref(0);
	const finishTotalPage = ref(0);
	const finishTotal = ref(0);

	//列表高度
	const listHeight = ref('');

	const formData = ref({
		field1: '',
		field2: ''
		// ...其他字段  
	});

	const showDialog = ref(false); // 控制弹出框显示与隐藏  

	onShow(() => {
		// #ifdef H5
		listHeight.value = 'calc(100vh - 88px)';
		// #endif

		// #ifdef APP-PLUS
		listHeight.value = 'calc(100vh - 44px)';
		// #endif
		// loadmore();
	});
	getMaterialRequestList()
	onPullDownRefresh(() => {
		current.value = 0;
		tableList.value = [];

	});

	const scrolltolower = () => {
		// totalPage.value > current.value && loadmore();
	};




	const show = ref(false);
	//缺料要货跳转
	function jumpTo(url) {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style lang="scss" scoped>
	.baseForm {
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif

		// #ifdef APP-PLUS
		min-height: calc(100vh - 44px);
		// #endif
		background-color: #F7F8FF;

		.tab-bar {
			padding: 0 40px;
		}

		.activeHeight {
			height: calc(100% - 44px);
		}
	}

	.list {
		.card {
			margin: $uni-page-padding;
			margin-top: 5px;
			margin-bottom: 5px;
			border-radius: 7px;
			display: flex;
			align-items: center;
			padding: 12px 10px 0px 10px;
			transition: all 300ms ease;
			box-shadow: 0 1px 5px rgba(19, 11, 236, 0.13);
			background-color: #fff;
			display: flex;
			align-items: flex-start;

			.left {
				flex: 1;
			}

			.title {
				font-size: 14px;
				line-height: 40px;
				height: 40px;
				margin-top: 8px;

				color: #101010;
				border-top: 1px solid #E5EBFF;
			}

			.uni-btn {
				float: right;
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				padding: 0 15px;
				margin-top: 7px;
				font-weight: 400;
			}

			.des {
				font-size: 12px;
				line-height: 20px;
				height: 20px;
				margin-bottom: 3px;
			}

			.right {
				// flex: 1;
				flex-basis: calc(70% + 10px);
			}
		}
	}
</style>